<template>
  <div class="login-wrapper">
    <div class="root">正在初始化环境...</div>
    <!-- <img class="logo" :src="logo" /> -->
    <!-- <el-form
      ref="login"
      :rules="rules"
      :model="form"
      label-width="0"
      style="width:100%;"
      @keydown.enter.native="submit"
    > -->
    <!-- Github登录方式 -->
    <!-- <el-form-item prop="userID">
        <el-select v-model="form.userID" class="user-selector">
          <el-option
            v-for="index in 30"
            :key="index"
            :label="`user${index-1}`"
            :value="`user${index-1}`"
          ></el-option>
        </el-select>
      </el-form-item> -->
    <!-- 线上版本登录方式 -->
    <!-- <el-form-item >
        <el-input v-model="form.userID" placeholder="请输入用户名" type="text" clearable></el-input>
      </el-form-item> -->
    <!-- <el-form-item prop="password">
        <el-input
          v-model="form.password"
          placeholder="请输入密码"
          type="password"
          show-password
          clearable
        ></el-input> -->
    <!--   </el-form-item>
    </el-form>
    <el-button
      type="primary"
      @click="submit"
      style="width:100%; margin-top: 6px;"
      :loading="loading"
    >登录</el-button> -->
  </div>
</template>

<script>
import { Form, FormItem, Select, Option } from "element-ui";
import logo from "../../assets/image/logo.png";

export default {
  name: "Login",
  components: {
    ElForm: Form,
    ElFormItem: FormItem,
    ElSelect: Select,
    ElOption: Option,
  },
  data() {
    const checkUserID = (rule, value, callback) => {
      if (!/^[a-zA-Z][a-zA-Z0-9_]{3,23}$/.test(value)) {
        callback(new Error("不合法（字母开头+字母/数字，长度4-24)"));
      } else {
        callback();
      }
    };

    return {
      form: {
        userID: "",
        userSig: "",
        GroupId: "",
      },

      logo: logo,
      registerVisible: false,
      loading: false,
    };
  },
  mounted() {
    this.login();
  },
  methods: {
    submit() {
      this.$refs["login"].validate((valid) => {
        if (valid) {
          this.login();
        }
      });
    },

    login() {
      // console.log(this.$route, "这是router");
      // let userID = window.location.href.split("?userId=")[1]; //抽取userID字符串后面的字符串
      // let userInfo = userID.split("&userSig=");
      // let userSigAndGroupId = userInfo[1]; //userSig和GroupId的字符串
      // let userSigAndGroupIdArr = userSigAndGroupId.split("&groupId=");
      this.form.userID = this.$route.query.userId; //id
      this.form.userSig = this.$route.query.userSig; //userSig
      this.form.GroupId = this.$route.query.groupId; //GroupId
      console.log(this.form.userID, "这是userID");
      console.log(this.form.userSig, "这是userSig");
      console.log(this.form.GroupId, "这是GroupId");
      this.$store.commit({
        type: "SET_GROUPID",
        GroupId: this.form.GroupId,
      });
      if (this.form.userID && this.form.userSig) {
        this.loading = true;
        this.tim
          .login({
            userID: this.form.userID,
            userSig: this.form.userSig,
          })
          .then(() => {
            let SDKAppIDs = process.env.VUE_APP_APPID;
            this.loading = false;
            this.$store.commit("toggleIsLogin", true);
            this.$store.commit("startComputeCurrent");
            this.$store.commit("showMessage", {
              type: "success",
              message: "登录成功",
            });
            this.$store.commit({
              type: "GET_USER_INFO",
              userID: this.form.userID,
              userSig: this.form.userSig,
              sdkAppID: window.genTestUserSig(
                "",
                Number(process.env.VUE_APP_APPID)
              ).SDKAppID,
            });
            this.$store.commit("showMessage", {
              type: "success",
              message: "登录成功",
            });
          })
          .catch((error) => {
            this.loading = false;
            this.$store.commit("showMessage", {
              message: "登录失败：" + error.message,
              type: "error",
            });
          });
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.login-wrapper {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 450px;
  background: $white;
  color: $black;
  border-radius: 5px;
  box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.3);

  .root {
    line-height: 200px;
  }
}

font-size 24px {
  .row-div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }

  .logo {
    width: 110px;
    height: 110px;
  }

  .loginBox {
    width: 320px;
    margin: 0 0 20px 0;

    .send-code {
      width: 112px;
    }

    .login-im-btn {
      width: 100%;
    }
  }

  .loginFooter {
    color: #8c8a8ac7;
    text-align: center;
    padding: 0 0 20px 0;
    cursor: pointer;
  }
}

.login-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 400px;
  padding: 20px 80px 50px;
  background: $white;
  color: $black;
  border-radius: 5px;
  box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.3);

  .logo {
    width: 130px;
    height: 130px;
  }

  .register-button {
    width: 100%;
    margin: 6px 0 0 0;
  }

  .user-selector {
    width: 100%;
  }
}
</style>
